[LargestContentfulPaint] Add poster video test and checkImage() helper This CL adds a test for poster image of video. It also adds a helper script with a checkImage() helper which is used in the tests where LCP entry with image is expected. The last parameter is an options array which is used to specify different expected behaviors. Bug: 994414 Change-Id: If0d085aa4569d2ce2d116734819c18028700ad8d Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1764416 Reviewed-by: Steve Kobes <skobes@chromium.org> Commit-Queue: Nicolás Peña Moreno <npm@chromium.org> Cr-Commit-Position: refs/heads/master@{#691736} diff --git a/largest-contentful-paint/contracted-image.html b/largest-contentful-paint/contracted-image.html index e099a5e..2d4a84b 100644 --- a/largest-contentful-paint/contracted-image.html +++ b/largest-contentful-paint/contracted-image.html
@@ -10,29 +10,21 @@ <body> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> +<script src="resources/largest-contentful-paint-helpers.js"></script> <script> async_test(function (t) { if (!window.LargestContentfulPaint) { assert_unreached("LargestContentfulPaint is not implemented"); } - let beforeRender = performance.now(); + const beforeLoad = performance.now(); const observer = new PerformanceObserver( t.step_func_done(function(entryList) { assert_equals(entryList.getEntries().length, 1); const entry = entryList.getEntries()[0]; - assert_equals(entry.entryType, 'largest-contentful-paint'); - assert_greater_than_equal(entry.renderTime, beforeRender, - 'The rendering timestamp should occur after script starts running.'); - assert_greater_than_equal(performance.now(), entry.renderTime, - 'The rendering timestamp should occur before the entry is dispatched to the observer.'); - assert_equals(entry.startTime, entry.renderTime, 'startTime should equal renderTime'); - assert_equals(entry.duration, 0); + const url = window.location.origin + '/images/black-rectangle.png'; // black-rectangle.png is 100 x 50. It occupies 50 x 50 so size will be bounded by the displayed size. - assert_equals(entry.size, 2500); - assert_equals(entry.id, 'image_id'); - const pathname = window.location.origin + '/images/black-rectangle.png'; - assert_equals(entry.url, pathname); - assert_equals(entry.element, document.getElementById('image_id')); + const size = 50 * 50; + checkImage(entry, url, 'image_id', size, beforeLoad); }) ); observer.observe({type: 'largest-contentful-paint', buffered: true}); diff --git a/largest-contentful-paint/cross-origin-image.sub.html b/largest-contentful-paint/cross-origin-image.sub.html index 7669d46..58e636e 100644 --- a/largest-contentful-paint/cross-origin-image.sub.html +++ b/largest-contentful-paint/cross-origin-image.sub.html
@@ -4,6 +4,7 @@ <body> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> +<script src="resources/largest-contentful-paint-helpers.js"></script> <script> async_test(function (t) { if (!window.LargestContentfulPaint) { @@ -14,18 +15,10 @@ t.step_func_done(function(entryList) { assert_equals(entryList.getEntries().length, 1); const entry = entryList.getEntries()[0]; - assert_equals(entry.entryType, 'largest-contentful-paint'); - assert_equals(entry.renderTime, 0, 'The renderTime value should be 0 for a cross origin image.'); - assert_equals(entry.startTime, entry.loadTime, 'startTime should equal loadTime'); - assert_equals(entry.duration, 0); + const url = 'http://{{domains[www]}}:{{ports[http][1]}}/images/blue.png'; // blue.png is 133 x 106. - assert_equals(entry.size, 14098); - assert_equals(entry.id, 'image_id'); - const pathname = 'http://{{domains[www]}}:{{ports[http][1]}}/images/blue.png'; - assert_equals(entry.url, pathname); - assert_greater_than_equal(entry.loadTime, beforeLoad); - assert_less_than(entry.loadTime, performance.now()); - assert_equals(entry.element, document.getElementById('image_id')); + const size = 133 * 106; + checkImage(entry, url, 'image_id', size, beforeLoad, ['renderTimeIs0']); }) ); observer.observe({type: 'largest-contentful-paint', buffered: true}); diff --git a/largest-contentful-paint/expanded-image.html b/largest-contentful-paint/expanded-image.html index 9f64189..6f7043d 100644 --- a/largest-contentful-paint/expanded-image.html +++ b/largest-contentful-paint/expanded-image.html
@@ -10,29 +10,21 @@ <body> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> +<script src="resources/largest-contentful-paint-helpers.js"></script> <script> async_test(function (t) { if (!window.LargestContentfulPaint) { assert_unreached("LargestContentfulPaint is not implemented"); } - let beforeRender = performance.now(); + const beforeLoad = performance.now(); const observer = new PerformanceObserver( t.step_func_done(function(entryList) { assert_equals(entryList.getEntries().length, 1); const entry = entryList.getEntries()[0]; - assert_equals(entry.entryType, 'largest-contentful-paint'); - assert_greater_than_equal(entry.renderTime, beforeRender, - 'The rendering timestamp should occur after script starts running.'); - assert_greater_than_equal(performance.now(), entry.renderTime, - 'The rendering timestamp should occur before the entry is dispatched to the observer.'); - assert_equals(entry.startTime, entry.renderTime, 'startTime should equal renderTime'); - assert_equals(entry.duration, 0); + const url = window.location.origin + '/images/black-rectangle.png'; // black-rectangle.png is 100 x 50. It occupies 300 x 300 so size will be bounded by the intrinsic size. - assert_equals(entry.size, 5000); - assert_equals(entry.id, 'image_id'); - const pathname = window.location.origin + '/images/black-rectangle.png'; - assert_equals(entry.url, pathname); - assert_equals(entry.element, document.getElementById('image_id')); + const size = 100 * 50; + checkImage(entry, url, 'image_id', size, beforeLoad); }) ); observer.observe({type: 'largest-contentful-paint', buffered: true}); diff --git a/largest-contentful-paint/first-letter-background.html b/largest-contentful-paint/first-letter-background.html index 19544c8..44d2a1a 100644 --- a/largest-contentful-paint/first-letter-background.html +++ b/largest-contentful-paint/first-letter-background.html
@@ -9,35 +9,21 @@ </style> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> -<script src="resources/element-timing-helpers.js"></script> +<script src="resources/largest-contentful-paint-helpers.js"></script> <script> - let beforeRender = performance.now(); async_test(function (t) { if (!window.LargestContentfulPaint) { assert_unreached("LargestContentfulPaint is not implemented"); } + const beforeLoad = performance.now(); const observer = new PerformanceObserver( t.step_func(function(entryList) { entryList.getEntries().forEach(entry => { // If we happen to get a text entry due to text happening before the image, return. if (entry.url === '') return; - assert_equals(entry.entryType, 'largest-contentful-paint'); - assert_greater_than_equal(entry.renderTime, beforeRender, - 'The rendering timestamp should occur after script starts running.'); - assert_greater_than_equal(performance.now(), entry.renderTime, - 'The rendering timestamp should occur before the entry is dispatched to the observer.'); - assert_equals(entry.startTime, entry.renderTime, 'startTime should equal renderTime'); - assert_equals(entry.duration, 0); - assert_greater_than_equal(entry.size, 0); - assert_equals(entry.id, 'target'); - const pathname = window.location.origin + '/images/black-rectangle.png'; - assert_equals(entry.url, pathname); - assert_greater_than(entry.loadTime, beforeRender, - 'The load timestamp should occur after script starts running.'); - assert_less_than(entry.loadTime, entry.renderTime, - 'The load timestamp should occur before the render timestamp.') - assert_equals(entry.element, document.getElementById('target')); + const url = window.location.origin + '/images/black-rectangle.png'; + checkImage(entry, url, 'target', 0, beforeLoad, ['sizeLowerBound']); t.done(); }) })); diff --git a/largest-contentful-paint/image-TAO.sub.html b/largest-contentful-paint/image-TAO.sub.html index 9409fd8..41c8c74 100644 --- a/largest-contentful-paint/image-TAO.sub.html +++ b/largest-contentful-paint/image-TAO.sub.html
@@ -4,7 +4,7 @@ <body> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> -<script src="resources/element-timing-helpers.js"></script> +<script src="resources/largest-contentful-paint-helpers.js"></script> <div id='my_div'></div> <script> async_test(t => { @@ -16,32 +16,31 @@ const valid_tao = ['wildcard', 'origin', 'multi', 'multi_wildcard', 'match_origin', 'match_wildcard']; const invalid_tao = ['null', 'space', 'uppercase']; const div = document.getElementById('my_div'); - let img_size = 20; + let img_length = 20; function addImage(tao) { const img = document.createElement('img'); img.src = remote_img + tao; img.id = tao; - img.height = img_size; - img.width = img_size; // Set increasing size so that largest-contentful-paint captures all of them. - img_size += 1; + img_length++; + img.height = img_length; + img.width = img_length; div.appendChild(img); } let img_count = 0; const total_images = valid_tao.length + invalid_tao.length; + let beforeLoad; new PerformanceObserver( t.step_func(entryList => { assert_equals(entryList.getEntries().length, 1); const entry = entryList.getEntries()[0]; - assert_greater_than(entry.loadTime, 0); const tao = entry.id; - if (valid_tao.includes(tao)) - assert_greater_than(entry.renderTime, 0, 'Image with valid TAO should have renderTime'); - else if (invalid_tao.includes(tao)) - assert_equals(entry.renderTime, 0, 'Image with invalid TAO should not have renderTime'); - else - assert_unreached('Should be in one of valid_tao OR invalid_tao'); + const url = remote_img + tao; + const size = img_length * img_length; + let options = valid_tao.includes(tao) ? [] : ['renderTimeIs0']; + checkImage(entry, url, tao, size, beforeLoad, options); img_count++; + beforeLoad = performance.now(); // Process valid TAO images first. if (img_count < valid_tao.length) addImage(valid_tao[img_count]); @@ -55,6 +54,7 @@ ).observe({type: 'largest-contentful-paint'}); // Add first image, the rest will be added on each observer callback. addImage(valid_tao[0]); + beforeLoad = performance.now(); }, 'Cross-origin elements with valid TAO have correct renderTime, with invalid TAO have renderTime set to 0.'); </script> </body> diff --git a/largest-contentful-paint/image-src-change.html b/largest-contentful-paint/image-src-change.html index 84a49f7..5ec860f 100644 --- a/largest-contentful-paint/image-src-change.html +++ b/largest-contentful-paint/image-src-change.html
@@ -4,44 +4,32 @@ <body> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> +<script src="resources/largest-contentful-paint-helpers.js"></script> <img src='/images/blue.png' id='image_id'/> <script> async_test(function (t) { if (!window.LargestContentfulPaint) { assert_unreached("LargestContentfulPaint is not implemented"); } - let beforeRender = performance.now(); + let beforeLoad = performance.now(); let firstCallback = true; const observer = new PerformanceObserver( - t.step_func_done(function(entryList) { + t.step_func(function(entryList) { assert_equals(entryList.getEntries().length, 1); const entry = entryList.getEntries()[0]; - assert_equals(entry.entryType, 'largest-contentful-paint'); - assert_greater_than_equal(entry.renderTime, beforeRender, - 'The rendering timestamp should occur after script starts running.'); - assert_greater_than_equal(performance.now(), entry.renderTime, - 'The rendering timestamp should occur before the entry is dispatched to the observer.'); - assert_equals(entry.startTime, entry.renderTime, 'startTime should equal renderTime'); - assert_equals(entry.duration, 0); + const url = window.location.origin + (firstCallback ? '/images/blue.png' : '/images/black-rectangle.png'); + // blue.png is 133 by 106. black-rectangle.png is 100 x 50. + const size = firstCallback ? 133 * 106 : 100 * 50; + checkImage(entry, url, 'image_id', size, beforeLoad); if (firstCallback) { - // blue.png is 133 x 106. - assert_equals(entry.size, 14098); - assert_equals(entry.id, 'image_id'); - const pathname = window.location.origin + '/images/blue.png'; - assert_equals(entry.url, pathname); - // Set the src to trigger another entry. const img = document.getElementById('image_id'); img.src = '/images/black-rectangle.png'; - beforeRender = performance.now(); + beforeLoad = performance.now(); firstCallback =false; - return; + } else { + t.done(); } - // black-rectangle.png is 100 x 50. - assert_equals(entry.size, 5000); - assert_equals(entry.id, 'image_id'); - const pathname = window.location.origin + '/images/black-rectangle.png'; - assert_equals(entry.url, pathname); }) ); observer.observe({type: 'largest-contentful-paint', buffered: true}); diff --git a/largest-contentful-paint/larger-image.html b/largest-contentful-paint/larger-image.html index 7ff38cf..094c209 100644 --- a/largest-contentful-paint/larger-image.html +++ b/largest-contentful-paint/larger-image.html
@@ -4,6 +4,7 @@ <body> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> +<script src="resources/largest-contentful-paint-helpers.js"></script> <!-- There is some text and some images. We care about blue.png being reported, as it is the largest. --> <p>This is some text! :)</p> <img src='/images/red.png' id='red'/> @@ -15,7 +16,7 @@ if (!window.LargestContentfulPaint) { assert_unreached("LargestContentfulPaint is not implemented"); } - const beforeRender = performance.now(); + const beforeLoad = performance.now(); const observer = new PerformanceObserver( t.step_func(entryList => { entryList.getEntries().forEach(entry => { @@ -23,22 +24,10 @@ if (entry.id !== 'blue') return; - assert_equals(entry.entryType, 'largest-contentful-paint'); - assert_greater_than_equal(entry.renderTime, beforeRender, - 'The rendering timestamp should occur after script starts running.'); - assert_greater_than_equal(performance.now(), entry.renderTime, - 'The rendering timestamp should occur before the entry is dispatched to the observer.'); - assert_equals(entry.startTime, entry.renderTime, 'startTime should equal renderTime'); - assert_equals(entry.duration, 0); - // blue.png is 133 x 106. - assert_equals(entry.size, 133 * 106); - assert_equals(entry.id, 'blue'); - assert_equals(entry.url, window.location.origin + '/images/blue.png'); - assert_greater_than(entry.loadTime, beforeRender, - 'The load timestamp should occur after script starts running.'); - assert_less_than(entry.loadTime, entry.renderTime, - 'The load timestamp should occur before the render timestamp.') - assert_equals(entry.element, document.getElementById('blue')); + const url = window.location.origin + '/images/blue.png'; + // blue.png is 133 by 106. + const size = 133 * 106; + checkImage(entry, url, 'blue', size, beforeLoad); t.done(); }) }) diff --git a/largest-contentful-paint/loadTime-after-appendChild.html b/largest-contentful-paint/loadTime-after-appendChild.html index 43ec9f6..0e40127 100644 --- a/largest-contentful-paint/loadTime-after-appendChild.html +++ b/largest-contentful-paint/loadTime-after-appendChild.html
@@ -4,6 +4,7 @@ <body> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> +<script src="resources/largest-contentful-paint-helpers.js"></script> <script> async_test(function (t) { if (!window.LargestContentfulPaint) { @@ -14,21 +15,16 @@ t.step_func_done(entryList => { assert_equals(entryList.getEntries().length, 1); const entry = entryList.getEntries()[0]; - assert_equals(entry.entryType, 'largest-contentful-paint'); - assert_equals(entry.startTime, entry.renderTime, 'startTime should equal renderTime'); - assert_equals(entry.duration, 0); - assert_equals(entry.url, window.location.origin + '/images/black-rectangle.png'); - assert_greater_than(entry.renderTime, entry.loadTime, - 'The image render time should occur after it is appended to the div.'); - assert_greater_than(entry.loadTime, beforeLoad, - 'The image load timestamp should occur after script starts running.'); - assert_less_than(entry.renderTime, performance.now(), - 'Image render time should be before the observer callback is executed.') + const url = window.location.origin + '/images/black-rectangle.png'; + // blue.png is 100 by 50. + const size = 100 * 50; + checkImage(entry, url, 'image_id', size, beforeLoad); }) ); observer.observe({type: 'largest-contentful-paint', buffered: true}); const img = document.createElement('img'); img.src = '/images/black-rectangle.png'; + img.id = 'image_id'; t.step_timeout(() => { beforeLoad = performance.now(); document.getElementById('image_div').appendChild(img); diff --git a/largest-contentful-paint/observe-after-untrusted-scroll.html b/largest-contentful-paint/observe-after-untrusted-scroll.html index b551e76..1b2cd1d 100644 --- a/largest-contentful-paint/observe-after-untrusted-scroll.html +++ b/largest-contentful-paint/observe-after-untrusted-scroll.html
@@ -4,35 +4,22 @@ <body> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> +<script src="resources/largest-contentful-paint-helpers.js"></script> <script> async_test(function (t) { if (!window.LargestContentfulPaint) { assert_unreached("LargestContentfulPaint is not implemented"); } - const beforeRender = performance.now(); + const beforeLoad = performance.now(); const observer = new PerformanceObserver( t.step_func_done(function(entryList) { assert_equals(entryList.getEntries().length, 1); const entry = entryList.getEntries()[0]; - assert_equals(entry.entryType, 'largest-contentful-paint'); - assert_greater_than_equal(entry.renderTime, beforeRender, - 'The rendering timestamp should occur after script starts running.'); - assert_greater_than_equal(performance.now(), entry.renderTime, - 'The rendering timestamp should occur before the entry is dispatched to the observer.'); - assert_equals(entry.startTime, entry.renderTime, 'startTime should equal renderTime'); - assert_equals(entry.duration, 0); - // blue.png is 133 x 106. - assert_equals(entry.size, 14098); - assert_equals(entry.id, 'image_id'); - // 25 is the length of "largest-contentful-paint/". - const index = window.location.href.lastIndexOf('/') - 25; - const pathname = window.location.href.substring(0, index) + '/images/blue.png'; - assert_equals(entry.url, pathname); - assert_greater_than(entry.loadTime, beforeRender, - 'The load timestamp should occur after script starts running.'); - assert_less_than(entry.loadTime, entry.renderTime, - 'The load timestamp should occur before the render timestamp.') - assert_equals(entry.element, document.getElementById('image_id')); + + const url = window.location.origin + '/images/blue.png'; + // blue.png is 133 by 106. + const size = 133 * 106; + checkImage(entry, url, 'image_id', size, beforeLoad); }) ); observer.observe({type: 'largest-contentful-paint', buffered: true}); diff --git a/largest-contentful-paint/observe-image.html b/largest-contentful-paint/observe-image.html index a9556eb..5856795 100644 --- a/largest-contentful-paint/observe-image.html +++ b/largest-contentful-paint/observe-image.html
@@ -4,35 +4,21 @@ <body> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> +<script src="resources/largest-contentful-paint-helpers.js"></script> <script> async_test(function (t) { if (!window.LargestContentfulPaint) { assert_unreached("LargestContentfulPaint is not implemented"); } - const beforeRender = performance.now(); + const beforeLoad = performance.now(); const observer = new PerformanceObserver( t.step_func_done(function(entryList) { assert_equals(entryList.getEntries().length, 1); const entry = entryList.getEntries()[0]; - assert_equals(entry.entryType, 'largest-contentful-paint'); - assert_greater_than_equal(entry.renderTime, beforeRender, - 'The rendering timestamp should occur after script starts running.'); - assert_greater_than_equal(performance.now(), entry.renderTime, - 'The rendering timestamp should occur before the entry is dispatched to the observer.'); - assert_equals(entry.startTime, entry.renderTime, 'startTime should equal renderTime'); - assert_equals(entry.duration, 0); - // blue.png is 133 x 106. - assert_equals(entry.size, 14098); - assert_equals(entry.id, 'image_id'); - // 25 is the length of "largest-contentful-paint/". - const index = window.location.href.lastIndexOf('/') - 25; - const pathname = window.location.href.substring(0, index) + '/images/blue.png'; - assert_equals(entry.url, pathname); - assert_greater_than(entry.loadTime, beforeRender, - 'The load timestamp should occur after script starts running.'); - assert_less_than(entry.loadTime, entry.renderTime, - 'The load timestamp should occur before the render timestamp.') - assert_equals(entry.element, document.getElementById('image_id')); + const url = window.location.origin + '/images/blue.png'; + // blue.png is 133 by 106. + const size = 133 * 106; + checkImage(entry, url, 'image_id', size, beforeLoad); }) ); observer.observe({type: 'largest-contentful-paint', buffered: true}); diff --git a/largest-contentful-paint/repeated-image.html b/largest-contentful-paint/repeated-image.html index d25d473..82d662d 100644 --- a/largest-contentful-paint/repeated-image.html +++ b/largest-contentful-paint/repeated-image.html
@@ -10,47 +10,35 @@ <body> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> +<script src="resources/largest-contentful-paint-helpers.js"></script> <script> async_test(function (t) { if (!window.LargestContentfulPaint) { assert_unreached("LargestContentfulPaint is not implemented"); } - const beforeFirstLoad = performance.now(); + let beforeLoad = performance.now(); let firstCallback = true; - const path = window.location.origin + '/images/black-rectangle.png'; - let beforeSecondLoad; + const url = window.location.origin + '/images/black-rectangle.png'; const observer = new PerformanceObserver( t.step_func(entryList => { assert_equals(entryList.getEntries().length, 1); const entry = entryList.getEntries()[0]; - assert_equals(entry.entryType, 'largest-contentful-paint'); - assert_equals(entry.startTime, entry.renderTime, 'startTime should equal renderTime'); - assert_equals(entry.duration, 0); - assert_equals(entry.url, path); - assert_less_than(entry.renderTime, performance.now(), - 'Image render time should be before the observer callback is executed.') + + // First image is shrunk to be 10 x 10. The second image is added at its natural size: 100 x 50. + const size = firstCallback ? 10 * 10 : 100 * 50; + const id = firstCallback ? 'image_id' : 'second_id'; + checkImage(entry, url, id, size, beforeLoad); if (firstCallback) { - assert_equals(entry.id, 'image_id'); - assert_greater_than(entry.renderTime, entry.loadTime, - 'The first image render time should occur after its load time.'); - assert_greater_than(entry.loadTime, beforeFirstLoad, - 'The first image load timestamp should occur after script starts running.'); - // Image is shrunk to be 10 x 10. - assert_equals(entry.size, 100); const img = document.createElement('img'); img.src = '/images/black-rectangle.png'; - beforeSecondLoad = performance.now(); + img.id = 'second_id'; + beforeLoad = performance.now(); document.getElementById('image_div').appendChild(img); firstCallback = false; return; + } else { + t.done(); } - // The second image is added at its natural size: 100 x 50. - assert_equals(entry.size, 5000); - assert_greater_than(entry.loadTime, beforeSecondLoad, - 'The second image load time should occur after adding it to the document body.'); - assert_greater_than(entry.renderTime, entry.loadTime, - 'The second image render time should occur after its load time.'); - t.done(); }) ); observer.observe({type: 'largest-contentful-paint', buffered: true}); diff --git a/largest-contentful-paint/resources/largest-contentful-paint-helpers.js b/largest-contentful-paint/resources/largest-contentful-paint-helpers.js new file mode 100644 index 0000000..0529e22 --- /dev/null +++ b/largest-contentful-paint/resources/largest-contentful-paint-helpers.js
@@ -0,0 +1,32 @@ +// Receives an image PerformanceElementTiming |entry| and checks |entry|'s attribute values. +// The |timeLowerBound| parameter is a lower bound on the loadTime value of the entry. +// The |options| parameter may contain some string values specifying the following: +// * 'renderTimeIs0': the renderTime should be 0 (image does not pass Timing-Allow-Origin checks). +// When not present, the renderTime should not be 0 (image passes the checks). +// * 'sizeLowerBound': the |expectedSize| is only a lower bound on the size attribute value. +// When not present, |expectedSize| must be exactly equal to the size attribute value. +function checkImage(entry, expectedUrl, expectedID, expectedSize, timeLowerBound, options = []) { + assert_equals(entry.name, ''); + assert_equals(entry.entryType, 'largest-contentful-paint'); + assert_equals(entry.duration, 0); + assert_equals(entry.url, expectedUrl); + assert_equals(entry.id, expectedID); + assert_equals(entry.element, document.getElementById(expectedID)); + if (options.includes('renderTimeIs0')) { + assert_equals(entry.renderTime, 0, 'renderTime should be 0'); + assert_between_exclusive(entry.loadTime, timeLowerBound, performance.now(), + 'loadTime should be between the lower bound and the current time'); + assert_equals(entry.startTime, entry.loadTime, 'startTime should equal loadTime'); + } else { + assert_between_exclusive(entry.loadTime, timeLowerBound, entry.renderTime, + 'loadTime should occur between the lower bound and the renderTime'); + assert_greater_than_equal(performance.now(), entry.renderTime, + 'renderTime should occur before the entry is dispatched to the observer.'); + assert_equals(entry.startTime, entry.renderTime, 'startTime should equal renderTime'); + } + if (options.includes('sizeLowerBound')) { + assert_greater_than(entry.size, expectedSize); + } else { + assert_equals(entry.size, expectedSize); + } +} \ No newline at end of file diff --git a/largest-contentful-paint/video-poster.html b/largest-contentful-paint/video-poster.html new file mode 100644 index 0000000..9ad9c4c --- /dev/null +++ b/largest-contentful-paint/video-poster.html
@@ -0,0 +1,26 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Largest Contentful Paint: observe video poster image</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/largest-contentful-paint-helpers.js"></script> +<script> +async_test(function (t) { + if (!window.LargestContentfulPaint) { + assert_unreached("LargestContentfulPaint is not implemented"); + } + const beforeLoad = performance.now(); + const observer = new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + const url = window.location.origin + '/images/blue.png'; + // blue.png is 133 by 106. + const size = 133 * 106; + checkImage(entry, url, 'the_poster', size, beforeLoad); + }) + ); + observer.observe({type: 'largest-contentful-paint', buffered: true}); +}, "Able to observe a video's poster image."); +</script> +<video id='the_poster' src='/media/test.mp4' poster='/images/blue.png'/> 